<script setup>
import { jump } from '@/utils/tool';
import { getFaultReport } from '@/api/my';

//响应式变量
const orderId = ref('');
const deviceId = ref('');
const showActionSheet = ref(false);
const actions = ref([{ name: '前往呼叫客服中心' }, { name: '客服号码复制到粘贴板' }]);
const { proxy } = getCurrentInstance();
const show = ref(false);
const deviceUuid = ref('');


// 页面加载时的逻辑
onLoad((options) => {
  console.log('options', options);
  if (options.orderId) {
    orderId.value = options.orderId;
  }
});

// 选择操作
const onSelect = (event) => {
  if (event.detail.name === '前往呼叫客服中心') {
    call();
  } else if (event.detail.name === '客服号码复制到粘贴板') {
    copy();
  }
};

// 呼叫客服中心
const call = () => {
  uni.makePhoneCall({
    phoneNumber: proxy.$globalData.servicePhone,
    fail: (err) => {
      console.error('拨打电话失败:', err);
      uni.showToast({
        title: '拨打电话失败',
        icon: 'none'
      });
    }
  });
};

// 复制客服号码
const copy = () => {
  uni.setClipboardData({
    data: proxy.$globalData.servicePhone,
    success: () => {
      uni.showToast({
        title: '客服号码已复制',
        icon: 'success',
        duration: 2000
      });
    }
  });
};

// 扫码处理
const scanTo = () => {
  uni.scanCode({
    onlyFromCamera: true,
    success: (res) => {
      if (!res || !res.result || res.result.indexOf('app/r/scan.html?id=') === -1) {
        setTimeout(() => {
          uni.showToast({
            title: '非正确二维码!',
            icon: 'warn',
            duration: 1500
          });
        }, 1500);
        return;
      }
      if (!res.result.includes(proxy.$globalData.serverUrl)) {
        uni.showToast({
          title: '未识别该品牌柜机二维码'
        });
        return;
      }
      const deviceIdExtracted = res.result.substring(res.result.indexOf('=') + 1);
      console.log('deviceIdExtracted', deviceIdExtracted);
      deviceId.value = deviceIdExtracted;
      getFaultReport({ deviceId: deviceId.value }).then((res) => {
        if (res.data == null) {
          setTimeout(() => {
            uni.showToast({
              title: '柜机不存在,请查看柜机是否为诚电科技柜机!',
              icon: 'none',
              duration: 1500
            });
          }, 1500);
          return;
        }
        let url = `/pages/faultReport/faultReport?deviceId=${deviceId.value}&deviceUuid=${res.data.deviceUuid}`;
        if (orderId.value !== '') {
          url += `&orderId=${orderId.value}`;
        }
        jump(url);
      });
    }
  });
};

// const aboutUs = () => {
//   show.value = true;
// };

// const onClose = () => {
//   show.value = false;
// };

//折叠面板
function change(e) {
  console.log(e);
}
</script>

<template>
  <van-action-sheet v-model:show="showActionSheet" :actions="actions" @select="onSelect"></van-action-sheet>
  <view class="graphic">
    <!-- id="aboutUs" -->
    <view class="quarter" @click="call">
      <image style="width: 82rpx; height: 82rpx" src="@/static/images/icon_service.png"></image>
      <view class="text_1">客服中心</view>
    </view>
    <view class="quarter" @click="scanTo">
      <image style="width: 82rpx; height: 82rpx" src="@/static/images/icon_breakdown.png"></image>
      <view class="text_1">扫码上报故障</view>
    </view>
  </view>

  <view class="header_text">
    <view class="problem">常见问题</view>
    <uni-collapse accordion @change="change">
      <uni-collapse-item title="没有取到充电宝" :show-animation="true">
        <view class="content">
          <text class="text" :user-select="true">
            请打开小程序【首页--我的订单】]查询当前订单状态:若订单已完成或取消,可重新扫码使用;若订单未完成,可联系
            门店工作人员关闭机柜并等待15秒后重新尝试;重启后若订单状态仍未改变,请拍摄机柜照片.包含清晰的右上角二维码与仓口位置,反馈至人工 客服核实
          </text>
        </view>
      </uni-collapse-item>
      <uni-collapse-item title="充电宝无法充电?" :show-animation="true">
        <view class="content">
          <text class="text" :user-select="true">若充电宝无法充电,请按下充电宝左侧开关重新尝试;若尝试后仍无法充电,请归还到机柜内,重新扫码使用其他充电宝</text>
        </view>
      </uni-collapse-item>
      <uni-collapse-item title="能否借多个充电宝？" :show-animation="true">
        <view class="content">
          <text class="text" :user-select="true">一个账号只能租借一个充电宝的哟~</text>
        </view>
      </uni-collapse-item>
    </uni-collapse>
    <view class="center">
      <uni-collapse accordion @change="change">
        <uni-collapse-item title="充电宝的计费规则？" :show-animation="true">
          <view class="content">
            <text class="text" :user-select="true">
              共享充电宝采用分时计费规则，从借出充电宝开始计时，归还充电宝后停止计时并扣费。不同区域网点的收费标准可能会不相同，您可以在扫码租借页面、订单详情页面查看具体收费标准。
            </text>
          </view>
        </uni-collapse-item>
        <uni-collapse-item title="归还后订单没有结束？" :show-animation="true">
          <view class="content">
            <text class="text" :user-select="true">
              请确认充电宝还入机柜仓口后已锁住且不可再取出，下拉刷新并查看【我的订单】的当前订单状态:若订单已完成，即已归还成功;若订单未完成，可联系门店工作人员关闭机柜并等待15秒后重新打开尝试;重启后15分钟若订单状态仍未改变，请拍摄归还机柜照片，包含清晰的二维码与归还仓口位置，反馈至在线人工客服核实。
              若有疑问，请联系在线客服
            </text>
          </view>
        </uni-collapse-item>
        <uni-collapse-item title="充电宝支持异地归还吗?" :show-animation="true">
          <view class="content">
            <text class="text" :user-select="true">支持全国通借通还,可通过附近网点查询</text>
          </view>
        </uni-collapse-item>
        <uni-collapse-item title="店铺打烊无法归还？" :show-animation="true">
          <view class="content">
            <text class="text" :user-select="true">联系在线客服或拨打客服热线暂停订单并尽快前往附近网点归还充电宝</text>
          </view>
        </uni-collapse-item>
        <uni-collapse-item title="充电宝如何归还？" :show-animation="true">
          <view class="content">
            <text class="text" :user-select="true">请整理好充电线,按照充电宝机身上箭头方向,插入机柜空闲孔位.归还成功后,可前往"我的订单"查看订单状态.</text>
          </view>
        </uni-collapse-item>
        <uni-collapse-item title="借出的充电宝是坏的怎么办？" :show-animation="true">
          <view class="content">
            <text class="text" :user-select="true">如果您借出的充电宝出现了损坏或无法充电的情况，请及时归还到机柜中。</text>
          </view>
        </uni-collapse-item>
      </uni-collapse>
    </view>
    <view class="bottom">
      <uni-collapse accordion @change="change">
        <uni-collapse-item title="订单如何支付？" :show-animation="true">
          <view class="content">
            <text class="text" :user-select="true">
              请确保第三方账户或绑定银行卡内余额充足,订单将会自动代扣完成支付;若未代扣成功.可打开小程序【我的订单】查看待付款订单并点击【立即支付】完成支付操作
            </text>
          </view>
        </uni-collapse-item>
        <uni-collapse-item title="退款多久到账？" :show-animation="true">
          <view class="content">
            <text class="text" :user-select="true">退款成功后,款项约在1~5个工作日内返回到您交易原渠道.如有疑问,可联系人工客服咨询</text>
          </view>
        </uni-collapse-item>
        <uni-collapse-item title="如何注销账户？" :show-animation="true">
          <view class="content">
            <text class="text" :user-select="true">暂不支持自动注销,请联系人工客服代为处理。</text>
          </view>
        </uni-collapse-item>
      </uni-collapse>
    </view>
  </view>
  <view class="footer">
    <text class="footer_text">若有疑问，请联系</text>
    <button :plain="true" type="default" size="default" open-type="contact" class="contact_button" style="border: none !important">在线客服</button>
  </view>
</template>

<style lang="scss">
page {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  background-color: #ececec;
}
.uni-collapse {
  border-radius: 30rpx !important;
}

.uni-collapse-item__title-box {
  border-radius: 30rpx !important;
}
.uni-collapse-item__title-text {
  font-size: 36rpx !important;
}
.graphic {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 200rpx;
  width: 750rpx;
  background-color: #fff;
  .quarter {
    display: flex;
    flex-direction: column;
    align-items: center;
    .text_1 {
      margin-top: 18rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: rgba(38, 38, 38, 1);
    }
  }
}
.header_text {
  flex: 1;
  margin: 40rpx 40rpx 0 40rpx;
  .problem {
    margin: 0 0 20rpx 10rpx;
    font-size: 36rpx;
    font-weight: 400;
    color: rgba(161, 161, 161, 1);
  }
  .center {
    margin-top: 40rpx;
  }
  .bottom {
    margin-top: 40rpx;
  }
  .text {
    display: flex;
    justify-content: left;
    margin-left: 30rpx;
    font-size: 36rpx;
    color: #333;
  }
}

.footer {
  display: flex;
  flex-direction: row; /* 改为行内排列 */
  align-items: center;
  justify-content: center; /* 居中对齐，根据需要调整 */
  margin-bottom: 40rpx;
  .footer_text {
    color: #a6a6a6;
  }

  .contact_button {
    margin: 0;
    padding: 0 0 0 6rpx;
    text-decoration: underline; /* 添加下划线 */
    font-size: 30rpx;
  }
}
</style>
